<template>
	<view class="company_toggle">
		<view class="common_function">
			<view class="item" @tap="showPop = !showPop">
				<image class="icon" src="/static/images/home/join_compa.png">
					加入企业
				</image>
			</view>
			<view class="item" @tap="goto('/pages/companyEmpty/companyCreate/index')">
				<image class="icon" src="/static/images/home/create_compa.png">
					创建企业
				</image>
			</view>
			<view class="item" @tap="developingTip('/pages/applyLog/index')">
				<image class="icon" src="/static/images/home/apply_log.png">
					申请记录
				</image>
			</view>
		</view>
		<view class="blank"></view>
		<view class="body">
		  <view class="search">
			 <input_icon @input="inputKey" prefix="search" placeholder="编号/名称"/>
			 <view class="action" @tap="getCompanyList">查询</view>
		  </view>
		  <view class="table">
				 <view class="thead">
					 <view class="tr">序号</view>
					 <view class="tr">编号</view>
					 <view class="tr">名称</view>
				 </view>
				 <view class="tbody" @tap="toggleComponay(item.id)" v-for="(item, index) in companyList" :key="item.id">
					 <view class="tr">{{index+1}}</view>
					 <view class="tr">{{item.code}}</view>
					 <view class="tr">{{item.name}}</view>
				 </view>
			 </view>
			<LoadingBar
				:update='updating'
				:refresh="refresh"
				:params="{pageSize: 10, codeOrName: this.key}"
				url="selectdept"
				:list="companyList"
				@bind_list="bindList"/>
		</view>
		<CompanyJoin :_showPop="showPop"/>
	</view>
</template>

<script>
	import CompanyJoin from '@/pages/companyEmpty/companyJoin/index.vue'
	import input_icon from '@/common/components/input/input-icon/index.vue'
	import LoadingBar from '@/common/components/loader/loadingBar/index.vue'
	
	export default {
		components: {
			CompanyJoin, input_icon, LoadingBar
		},
		data() {
			return {
				showPop: false,
				company: {},
				remark: '',
				key: '',
				companyList: [],
				refresh: false,
				updating: false
			}
		},
		onReachBottom() {
		  this.updating = !this.updating;
		},
		mounted() {
			this.refresh = !this.refresh
		},
		methods: {
			bindList(list) {
				this.companyList = list
			},
			inputKey(e) {
				this.key = e.target.value
			},
			getCompanyList() {
				this.refresh = !this.refresh
			},
			toggleComponay(id) {
				this.http.POST({
					name: 'changcompany',
					params: {
						companyId: id
					}
				})
				.then(res => {
					if(res.result === 'success') {
						uni.setStorageSync('departId', res.data.departId)
						uni.setStorageSync('departName', res.data.departName)
						uni.$emit('update',{msg:'页面更新'})
						uni.navigateBack({
							delta: 1
						})
					}
				})
			}
		}
	}
</script>

<style>
	.company_toggle {
		min-height: 100vh;
		background: #FFFFFF;
	}
	
	.company_toggle .common_function {
		background-color: #FFFFFF;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
		position: fixed;
		top: 0rpx;
		width: 100%;
		z-index: 2;
	}
	.common_function .item {
		padding: 26upx 0upx;
		width: 33.3%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		font-size: 28upx;
	}
	.common_function .item .icon {
		width: 60upx;
		height: 60upx;
	}
	
	.company_toggle .blank {
		height: 20upx;
		width: 100%;
		position: fixed;
		top: 145upx;
		background: #F8F8F8;
	}
	
	.company_toggle .body {
		background-color: #FFFFFF;
		padding-top: 36upx;
		margin-top: 160upx;
	}
	
	
	.body .search, .body .search, .body .search {
		position: fixed;
		top: 164rpx;
		left: 0rpx;
		right: 0rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: space-between;
		padding: 10upx 68upx;
	}
	.body .search .action {
		background: var(--theme-color);
		color: white;
		font-size: 32upx;
		width: 174upx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.body .search input_icon {
		border: 1upx solid #DDDDDD;
		flex: 1;
	}
	.body .search .wrapper {
		height: 100upx;
		border-bottom: none;
	}
	.body .search input_icon .icon {
		width: 28upx;
		height: 28upx;
	}
	.body .table {
		margin: 29upx 25upx;
		margin-top: 90upx;
		margin-bottom: 0upx;
		border-top: 1upx solid #DDDDDD;
		border-right: 1upx solid #DDDDDD;
		padding: 1upx;
	}
	.body .table .thead {
		background-color: #F5F5F5;
		color: #333333;
		font-size: 30upx;
	}
	.body .table .tbody {
		color: #666666;
		font-size: 28upx;
	}
	.body .table .tbody:active {
		background-color: #EEEEEE;
	}
	.body .table .thead, .body .table .tbody {
		border-bottom: 1upx solid #DDDDDD;
		display: flex;
	}
	.body .table .tr {
		border-left: 1upx solid #DDDDDD;
		padding-left: 17upx;
		height: 70upx;
		line-height: 70upx;
		flex: 1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.body .table .tr:nth-child(2) {
		flex: 1.5;
	}
	.body .table .tr:nth-child(3) {
		flex: 4;
	}
	
</style>
